<template>
	<view class="page">
		<div class="form">
			<div class="list">
				<span class="left">姓名</span>
				<span class="right">
					<input type="text" v-model="realname" placeholder="请输入您的真实姓名" />
				</span>
			</div>
			<div class="list">
				<span class="left">手机号码</span>
				<span class="right">
					<input type="text" v-model="phone" placeholder="请输入手机号" />
				</span>
			</div>
			<!-- <div class="list">
				<span class="left">居住地址</span>
				<span class="right">
					<input type="text" v-model="address" placeholder="请输入地址" />
				</span>
			</div> -->
			<div class="list">
				<span class="left">回收类型</span>
				<span class="right">
					<radio-group @change="radioChange">
						<label v-for="(item, index) in items" :key="item.value" class="inline_label">
							<view>
								<radio :value="item.value" :checked="index == current" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
					<!-- <input type="text" placeholder="请选择上门地址" @click="chooseAdress" v-model="address"  readonly="true"/> -->
				</span>
			</div>
			<div class="list">
				<span class="left">居住地址</span>
				<span class="right">
					<span v-if="!address" style="color: #777777;" @click="chooseAdress">请选择居住地址</span>
					<span v-if="address" @click="chooseAdress">{{address}}</span>
					<!-- <input type="text" placeholder="请选择上门地址" @click="chooseAdress" v-model="address"  readonly="true"/> -->
				</span>
			</div>
			<!-- <div class="list">
				<span class="left">详细地址</span>
				<span class="right">
					<input type="text" placeholder="请输入详细地址" v-model="address" />
				</span>
			</div> -->
			<div class="list">
				<span class="left">上传证件</span>
				<span class="right">
					<span class="card_01" @click="chooseImage(1)">
						<image :src="sfzzimage || '../../static/register_02.png'"></image>
					</span>
					<span class="card_01" @click="chooseImage(2)">
						<image :src="sfzfimage || '../../static/register_01.png'"></image>
					</span>
				</span>
			</div>
		</div>
		<div class="input" @click="register">
			<button>提交申请</button>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sourceType: ['camera', 'album'],
				sfzzimage: "",
				sfzfimage: "",
				realname: "",
				phone: "",
				address: "",
				userInfo: {},
				lng: "",
				lat: "",
				type:1,
				items: [{
						value: '1',
						name: '可回收',
						checked: 'true'
					},
					{
						value: '2',
						name: '不可回收'
					},
				],
				current:0
			}
		},
		methods: {
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value == evt.target.value) {
						this.current = i;
						this.type = this.items[i].value;
						break;
					}
				}
			},
			chooseAdress() {
				var that = this;
				uni.chooseLocation({
					success: (res) => {
						this.address = res.address + res.name;
						this.lng = res.longitude;
						this.lat = res.latitude;
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					},
					fail: (res) => {
						console.log(res)
						wx.getSetting({
							success: function(res) {
								var statu = res.authSetting;
								if (!statu['scope.userLocation']) {
									wx.showModal({
										title: '是否授权当前位置',
										content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
										success(tip) {
											if (tip.confirm) {
												wx.openSetting({
													success: function(data) {
														if (data.authSetting["scope.userLocation"] === true) {
															wx.showToast({
																title: '授权成功',
																icon: 'success',
																duration: 1000
															})
															//授权成功之后，再调用chooseLocation选择地方
															setTimeout(function() {
																that.chooseAdress()
															}, 1000)
														}
													}
												})
											} else {
												wx.showToast({
													title: '授权失败',
													icon: 'none',
													duration: 1000
												})
											}
										}
									})

								}
							}
						})
					}
				});
			},
			chooseImage(type) {
				uni.chooseImage({
					sourceType: this.sourceType,
					count: 1,
					success: (res) => {
						var imgFiles = res.tempFilePaths[0];
						console.log(imgFiles)
						uni.uploadFile({
							// 需要上传的地址
							url: this.$domain + 'common/upload',
							header: {
								'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
								'token': uni.getStorageSync('token') || ""
							},
							filePath: imgFiles,
							name: 'file',
							success: (res1) => {
								// 显示上传信息
								var res1 = JSON.parse(res1.data);
								if (res1.code == 1) {
									if (type == 1) {
										this.sfzzimage = this.$enviorment + res1.data.url;
									} else {
										this.sfzfimage = this.$enviorment + res1.data.url;
									}
								}
								console.log(res1)
							}
						});
					}
				})
			},
			register() {
				var params = {
					realname: this.realname,
					phone: this.phone,
					address: this.address,
					sfzzimage: this.sfzzimage,
					sfzfimage: this.sfzfimage,
					gender: this.userInfo.gender,
					lat: this.lat,
					lng: this.lng,
					type:this.type,
				}
				if (!params.realname) {
					uni.showToast({
						title: "请输入您的真实姓名！",
						icon: "none"
					});
					return
				}
				if (!params.phone) {
					uni.showToast({
						title: "请输入手机号！",
						icon: "none"
					});
					return
				}
				if (!params.address) {
					uni.showToast({
						title: "请输入地址！",
						icon: "none"
					});
					return
				}
				if (!params.sfzzimage) {
					uni.showToast({
						title: "请上传身份证正面照！",
						icon: "none"
					});
					return
				}
				if (!params.sfzfimage) {
					uni.showToast({
						title: "请上传身份证反面照！",
						icon: "none"
					});
					return
				}
				this.$post('user/authentication', params, (res) => {
					uni.requestSubscribeMessage({
						tmplIds:["_4gIXjgj_MWFRUOvUYvA5CXaVUx0tZbD_Mb1NfaeUoI"],
						success:(res)=>{
							console.log(res)
							uni.showToast({
								title: "提交成功！",
							})
							uni.reLaunch({
								url: "/pages/my/my"
							});
						},
						fail:(res)=>{
							console.log(res)
						},
					})
				})
			},
			getAuthenticationinfo() {
				this.$post('user/authenticationinfo', {}, (res) => {
					if (!res) {
						return
					}
					this.realname = res.realname;
					this.phone = res.phone;
					this.address = res.address;
					this.sfzzimage = res.sfzzimage;
					this.sfzfimage = res.sfzfimage;
				})
			},
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo');
			this.getAuthenticationinfo()
			var that = this;
			uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					console.log(res)
					that.lat = res.latitude;
					that.lng = res.longitude;
				}
			});
		}
	}
</script>

<style>
	page {
		background-color: #F6F6F6;
	}

	.form {
		font-size: 30rpx;
		color: #333;
		background-color: #FFFFFF;
		padding: 0 40rpx;
		padding-bottom: 50rpx;
		margin-top: 20rpx;
	}

	.form .list {
		padding: 30rpx 0;
		border-bottom: 1px solid #e5e5e5;
		font-size: 30rpx;
		display: flex;
	}

	.form .list:last-child {
		border: none;
	}

	.form .list::after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}

	.form .list .left {
		width: 200rpx;
	}

	.form .list .right {
		flex: 1;
	}

	.form .list .right image {
		width: 200rpx;
	}

	.input {
		margin: 0 auto;
		width: 630rpx;
		margin-top: 80rpx;
	}

	.input button {
		color: #FFFFFF;
		font-size: 34rpx;
		text-align: center;
		height: 98rpx;
		line-height: 98rpx;
		background: #22BF8A;
		border-radius: 8px;
	}

	.card_01 {
		margin-right: 20rpx;
	}

	.card_01 image {
		width: 200rpx;
		height: 200rpx;
	}
	.inline_label{
		display: inline-block;
		margin-right: 30rpx;
	}
	.inline_label view{
		display: inline-block;
	}
</style>
